<template>
    <div class="logistics-info">
        <!--收货信息-->
        <div class="table-list">
            <div class="table-header">收货信息</div>
            <div class="table-item">用户昵称：{{ value.username }}</div>
            <div class="table-item">收货人：{{ value.logisticsBackMsg.addrName }}</div>
            <div class="table-item">联系电话：{{ value.logisticsBackMsg.addrPhone }}</div>
            <div class="table-item">收货地址：{{ value.logisticsBackMsg.areaName + value.logisticsBackMsg.address }}</div>
        </div>
        <h2>寄回物流</h2>
        <p><span>快递公司：{{ value.logisticsBackMsg.expressName }}</span><span>快递单号：{{ value.logisticsBackMsg.expressNo }}</span></p>
        <h2>重寄物流</h2>
    </div>
</template>

<script>
	export default {
		name: 'LogisticsInfo',
		props: {
			// 售后信息
			value: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
	};
</script>

<style lang="stylus" scoped>
.logistics-info {
    .table-list {
        border-radius: 4px;
        border: 1px solid #C9C9C9;
        color: #333333;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .table-header {
            background: #F5F5F5;
            padding: 2px 14px;
            font-weight: 600;
        }
        .table-item {
            padding: 2px 14px;
            border-bottom: 1px solid #f5f5f5;
            &:last-child {
                border-bottom: none;
            }
            flexBox(space-between);
            p {
                width: 50%;
                textOverflow(1)
            }
        }
    }
    h2 {
        color: #1E1E1E;
        font-size: 18px;
    }
    p {
        color: #333333;
        font-size: 16px;
        margin: 10px 0;
        span {
            margin-left: 30px;
        }
    }
}
</style>